<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import { ElMessage, ElTree } from 'element-plus'
import dacxService from '@/api/dacx'
import TreeUtilDTO from '@/utils/tree'
import wsjzglService from '@/api/wsjzgl'
import { useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { useMainStore } from '@/store/main'

const route = useRoute()
const store = useMainStore()

const props = defineProps({
  daxq: {
    type: Object,
    default: null,
  },
})
const emit = defineEmits(['nodeClick'])

const init = () => {
  queryTree()
}

const filterForm = ref({
  gjzValue: '',
  mlSelect: '',
})

const defaultProps = {
  children: 'children',
  label: 'mc',
}
const treeData = ref<any>([])
// const selectTreeData = ref<any>([])
const firtsNode = ref<any>()

/*
 * 查询树
 */
const queryTree = () => {
  const params = {
    ajmc: props.daxq.ajmc,
    dabh: props.daxq.dabh,
  }
  dacxService
    .getSsdaws(params)
    .then((res) => {
      treeData.value = TreeUtilDTO.getTreeData(res.data || [], 'dm', 'fdm')
      if (treeData.value.length) {
        firtsNode.value = null
        // 递归添加层级
        arrayFlagLevel(treeData.value, 0)
        // 递归选择第一个
        getFirstNode(treeData.value)
        if (firtsNode.value) {
          handleCheckNode(firtsNode.value)
        }
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const getFirstNode = (arr: any[]) => {
  if (firtsNode.value) return
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].children && arr[i].children.length > 0) {
      getFirstNode(arr[i].children)
    } else {
      firtsNode.value = arr[i]
    }
    return
  }
}

const arrayFlagLevel = (arr: any[], level: number) => {
  if (firtsNode.value) return
  for (let i = 0; i < arr.length; i++) {
    arr[i]['cj'] = level
    if (arr[i].children && arr[i].children.length > 0) {
      arrayFlagLevel(arr[i].children, level + 1)
    }
  }
}

const handleCheckNode = (node: any) => {
  treeNodeClick(node)
  nextTick(() => {
    treeRef.value!.setCurrentKey(node.dm)
  })
}

/*
 * 树节点点击（抛出方法到主界面）
 */
const treeNodeData = ref()
const treeNodeClick = (data: any) => {
  treeNodeData.value = data
  emit('nodeClick', treeNodeData.value)
}

const treeRef = ref<InstanceType<typeof ElTree>>()
// 文字过滤
const filterTree = () => {
  treeRef.value?.filter(filterForm.value.gjzValue)
}

/**
 * 树节点过滤
 */
const filterNode = (value: any, data: any) => {
  let flag = true
  if (value) {
    if (typeof value === 'string') {
      // 文字过滤
      flag = data[defaultProps.label].indexOf(value) !== -1
    }
  }
  return flag
}

defineExpose({ init })
</script>
<template>
  <div class="container">
    <div>
      <div class="center">
        <el-input
          v-model="filterForm.gjzValue"
          autosize=""
          placeholder="输入查询关键字"
          @change="filterTree"
          :suffix-icon="Search"
        >
        </el-input>
      </div>
      <div class="bottom">
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="treeData"
          node-key="dm"
          highlight-current
          default-expand-all
          :expand-on-click-node="false"
          :props="defaultProps"
          @node-click="treeNodeClick"
          :filter-node-method="filterNode"
        >
          <template #default="{ data }">
            <span class="custom-tree-node">
              <img v-if="!data.fdm" src="/src/assets/images/file-icon.png" alt="" />
              <img v-if="!data.children" src="/src/assets/images/text-icon.png" alt="" />
              <span>&nbsp;{{ data.mc }}&nbsp;({{ data.sl }})</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  // padding: 5px;
  .top {
    margin-bottom: 10px;
  }
  .center {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
  .bottom {
    .tree_rightmenu {
      position: fixed;
      width: 120px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      z-index: 1000;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
.add-aj {
  width: 100%;
}
.el-input__icon {
  cursor: pointer;
}

:deep(.el-tabs .el-tabs__content) {
  height: calc(100% - 40px);
  /* overflow: auto; */
  padding: 0;
}
</style>
